import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { NzCascaderOption } from 'ng-zorro-antd/cascader';
import { firstValueFrom, lastValueFrom } from 'rxjs';
import { AppointmentService } from 'src/app/service/business/appointment.service';
import { CommonService } from 'src/app/service/common/common.service';
import { MessageService } from 'src/app/service/message.service';
import { formValid } from 'src/app/utils/form-valid';
import { NAME_REG, PHONE_REG } from 'src/app/utils/regExp';
import { dateFormat } from 'src/app/utils/utils';

@Component({
  selector: 'app-appointment',
  templateUrl: './appointment.component.html',
  styleUrls: ['./appointment.component.scss']
})
export class AppointmentComponent implements OnInit {

  constructor(
    private appointment: AppointmentService,
    private message: MessageService,
    private router: Router,
    private common: CommonService
  ) { }

  formData = new FormGroup({
    appointmentServiceHallId: new FormControl(),
    appointmentHallId: new FormControl('', [
      Validators.required
    ]),
    hallAddress: new FormControl(),
    appointmentTypeId: new FormControl('', [
      Validators.required
    ]),
    // 预约日期
    appointmentDate: new FormControl('', [
      Validators.required
    ]),
    // 预约时段
    appointmentTimeId: new FormControl('', [
      Validators.required
    ]),
    // 预约人
    appointmentUserName: new FormControl('', [
      Validators.required,
      Validators.pattern(NAME_REG)
    ]),
    appointmentUserTel: new FormControl('', [
      Validators.required,
      Validators.pattern(PHONE_REG)
    ]),
    verificationCode: new FormControl('', [
      Validators.required
    ]),
  });

  ngOnInit(): void {
    this.common.setRightInfoVisible(true)
    this.getAppointmentHalls()

    this.getControl('appointmentTypeId')?.disable()
    this.getControl('appointmentDate')?.disable()
    this.getControl('appointmentTimeId')?.disable()
  }

  // 获取营业厅数据
  appointmentHalls: any = []
  hallsLoading = false
  getAppointmentHalls(){
    this.hallsLoading = true
    this.appointment._getAppointmentHalls('01cc2469-96fe-47d7-88ba-159f34daae6a').subscribe({
      next: (res) => {
        this.appointmentHalls = res
        this.hallsLoading = false
      },
      error: error => {
        this.hallsLoading = false
      }
    })
  }
  
  // 获取 预约业务类型
  appointmentTypes: any = []
  typeLoading = false
  getAppointmentTypes(e: any){
    this.getControl('appointmentTypeId')?.reset()
    this.getControl('hallAddress')?.reset()
    this.getControl('appointmentDate')?.reset()
    this.getControl('appointmentTimeId')?.reset()
    
    this.getControl('appointmentTypeId')?.enable()

    const hall = this.appointmentHalls.find((_: any) => _.id === e)
    console.log(hall)
    this.getControl('hallAddress')?.setValue(hall?.serviceHallAddress)
    
    this.typeLoading = true
    this.appointmentTypes = []
    this.appointment._getAppointmentTypes(e).subscribe({
      next: res => {
        this.appointmentTypes = res
        this.typeLoading = false
      },
      error: error => {
        this.message.createErrorMessage(error)
        this.typeLoading = false
      }
    })
  }
  appointmentTypeChange(e: any){
    this.getControl('appointmentDate')?.reset()
    this.getControl('appointmentTimeId')?.reset()
    if(!e){
      this.getControl('appointmentDate')?.disable()
    }else{
      this.getControl('appointmentDate')?.enable()
    }
  }
  // 预约日期 值改变时
  onAppointmentDate(e: any){
    this.getControl('appointmentTimeId')?.reset()
    if(!e){
      this.getControl('appointmentTimeId')?.disable()
    }else{
      this.getControl('appointmentTimeId')?.enable()
    }
    
    if(!e) return

    const hallId = this.getControl('appointmentHallId')?.value
    const typeId = this.getControl('appointmentTypeId')?.value
    const date = dateFormat(e)
    this.getAppointmentTimes(hallId, typeId, date)
  }
  endDisabledDate(value: Date){
    console.log(value)
    const days = (value.getTime() - (new Date()).getTime())/1000/60/60/24;
    return days > 7 || days < -1
  }
  // 获取预约时段
  appointmentTimes: any = []
  appointmentTimesLoading = false
  getAppointmentTimes(hallId: string, typeId: string, date: string){
    this.appointmentTimesLoading = true
    this.appointmentTimes = []
    this.appointment._getAppointmentTime(hallId, typeId, date).subscribe({
      next: (res) => {
        console.log(res)
        this.appointmentTimes = res
        this.appointmentTimesLoading = false
      },
      error: (error) => {
        this.message.createErrorMessage(error)
        this.appointmentTimesLoading = false
      }
    })
  }

  formBtnLoading = false
  submit(){
    if(!formValid(this.formData)){
      return
    }
    const params: any = this.formData.value
    params.appointmentDate = dateFormat(params.appointmentDate)
    
    this.formBtnLoading = true
    this.appointment._appointmentByPhone(this.formData.value).subscribe({
      next: (res) => {
        this.message.successModal('提交成功, 点击确定按钮返回', () => {
          this.router.navigate(['/business/appointment/list'])
        })

        this.formBtnLoading = false
      },
      error: (error) => {
        this.formBtnLoading = false
        this.message.createErrorMessage(error)
      }
    })
  }
  cancel(){
    this.message.confirmModal('确认重置表单并返回上一页吗', () => {
      this.router.navigate(['/business/appointment/list'])
    })
  }

  // get
  getControl(key: string){
    return this.formData.get(key)
  }
  

}
